<script>
  import sheep from '@/sheep';
  import RecursiveList from '@/pages/genealogy/components/RecursiveList.vue';
  import CanonizationComponents from '@/pages/genealogy/components/canonizationComponents.vue';
  import dayjs from 'dayjs';
  import ImageAvater from '@/sheep/components/s-avatar/s-avatar.vue';
  import SFirstPopup from '@/sheep/components/s-first-popup/s-first-popup.vue';
  import calendar from '@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar';
  import SBetterCalendar from '@/sheep/components/s-better-calendar/s-better-calendar.vue';

  const INIT_DAY_TYPE = 'solar';
  const INIT_DAY_TIMESTAMP = dayjs().valueOf();
  const INIT_DAY = dayjs().format('YYYY-MM-DD');

  export default {
    name: 'genealogyInfo',
    components: { SBetterCalendar, SFirstPopup, ImageAvater, CanonizationComponents, RecursiveList },
    data() {
      return {
        // 家谱信息
        genealogyInfo: {},
        // 家谱列表
        genealogicalList: [],
        // 选项列表
        genealogyOptions: [
          {
            name: '树谱',
          },
          {
            name: '册谱',
          },
          {
            name: '纪念堂',
          },
          {
            name: '生日',
          },
          {
            name: '纪念日',
          },
        ],
        // 选中的类目
        selectIndex: 0,
        // 世系排名
        genealogicalHead: [],
        // 字辈列表
        generationList: [],
        isFirst: false,
        listHeight: 0,
        // 缩放后的值
        scaleValueAfter: 1,
        movableViewInfo: {
          width: 0,
          height: 0,
        },
        movable: {
          x: 0,
          y: 0,
        },
        // 本人信息
        selfCoordinate: {},
        centralPoint: {
          x: 0,
          y: 0,
        },
        // 册谱信息
        canonizationList: [],
        canonizationBg: '',
        // 纪念堂信息
        memorialHallList: [],
        // 家谱生日列表
        birthdayList: [],
        // 家谱纪念日
        anniversaryList: [],
        // 生日详情
        birthdayDetail: {},
        // 生日个人详情
        memberInfo: {},
        // 修改生日详情
        form: {},
        // 修改生日参数
        date: {
          type: INIT_DAY_TYPE, // 类型
          timestamp: INIT_DAY_TIMESTAMP, // 时间戳
          solarDate: INIT_DAY, // 公历日期 - 文本（2000-1-1）
          lunarDate: '', // 农历日期 - 文本（己卯年冬月廿五(2000-1-1)）
          lunarDateNumber: '', // 农历生日的数字写法（1999-12-25）
          defaultValue: [100, 0, 0], // 默认选中的日期
        },
        // 修改纪念日详情
        memorialDate: {
          type: INIT_DAY_TYPE, // 类型
          timestamp: INIT_DAY_TIMESTAMP, // 时间戳
          solarDate: INIT_DAY, // 公历日期 - 文本（2000-1-1）
          lunarDate: '', // 农历日期 - 文本（己卯年冬月廿五(2000-1-1)）
          lunarDateNumber: '', // 农历生日的数字写法（1999-12-25）
          defaultValue: [100, 0, 0], // 默认选中的日期
        },
        // 是否显示编辑生日修改弹窗
        showCalendar: false,
        memorialDayForm: {},
        memorialShowCalendar: false,
        membership: [],
      };
    },
    props: {
      // 家谱id
      id: {
        type: [String, Number],
        default: '',
      },
      info:{
        type: Object,
        default: () => {
          return {};
        },
      }
    },
    watch: {
      id: {
        async handler(newVal, oldVal) {
          uni.$on('setCoordinate', (info) => {
            console.log('本人的坐标=>', info);
            this.$nextTick(async () => {
              if (!!info.info) {
                this.selfCoordinate = info.info;
                setTimeout(() => {
                  this.movable.x = -this.selfCoordinate.left + sheep.$platform.device.screenWidth / 2;
                  this.movable.y = -this.selfCoordinate.top + sheep.$platform.device.screenHeight / 2;
                  this.centralPoint.x = -this.selfCoordinate.left + sheep.$platform.device.screenWidth / 2;
                  this.centralPoint.y = -this.selfCoordinate.top + sheep.$platform.device.screenHeight / 2;
                  console.log(this.movable.x, this.movable.y);
                  uni.setStorageSync('locationInformation', { x: this.movable.x, y: this.movable.y });
                  this.isFirst = true;
                  uni.hideLoading();
                  // locationInformation.listHeight = page.selfCoordinate.height;
                  setTimeout(() => {
                    uni.$emit('setAvatar_genealogy');
                  }, 100);
                  uni.$off('setCoordinate');
                }, 100);
              } else {
                setTimeout(() => {
                  console.log('获取不到坐标');
                  this.movable.x = -info.res.left + sheep.$platform.device.screenWidth / 2;
                  this.movable.y = -info.res.top + sheep.$platform.device.screenHeight / 2;
                  uni.setStorageSync('locationInformation', { x: this.movable.x, y: this.movable.y });
                  this.isFirst = true;
                  uni.hideLoading();
                  uni.$off('setCoordinate');
                }, 50);
              }
            });
          });
          // 更新视图宽度
          uni.$on('changeWidth', (flag = false) => {
            this.changeWidth(flag);
            setTimeout(() => {
              uni.$emit('generationChange');
            }, 10);
          });
          this.genealogicalList = [];
          await this.getGenealogyInfo();
          await this.getRank();
          await this.getGeneration();
          await this.getCanonizationDetail();
          await this.getMemorialHallDetail();
          await this.getGenealogyBirthdayList();
          await this.getMemorialDay();
        },
        deep: true,
        immediate: true,
      },
    },
    created() {
      uni.$on('setMemberList', async (index) => {
        this.membership.push(index);
        if (this.membership.length == this.genealogyInfo.all_count) {
          await uni.$emit('loadSuccess');
          this.changeWidth()
        }
      });
    },
    computed: {
      nc_image() {
        return sheep.$store('AI').nc_image;
      },
      IMG_URL() {
        return sheep.$store('AI').sq_image_path;
      },
      // 阳历日期
      solarCalendarDate() {
        if (!!this.form.dateBirth) {
          if (this.date.type == 'lunar') {
            console.log(Number(this.form.dateBirth.split('-')[0]), Number(this.form.dateBirth.split('-')[1]), Number(this.form.dateBirth.split('-')[2]));
            let dt = calendar.lunar2solar(Number(this.form.dateBirth.split('-')[0]), Number(this.form.dateBirth.split('-')[1]), Number(this.form.dateBirth.split('-')[2]), !!this.date.isLeap ? true : false);
            console.log(dt);
            return dayjs(`${dt.cYear}-${dt.cMonth}-${dt.cDay}`).format('YYYY年MM月DD日');
          } else {
            return dayjs(this.form.dateBirth).format('YYYY年MM月DD日');
          }
        } else {
          return '';
        }
      },
      memorialSolarCalendarDate() {
        if (!!this.memorialDayForm.dateBirth) {
          if (this.memorialDate.type == 'lunar') {
            console.log(Number(this.memorialDayForm.dateBirth.split('-')[0]), Number(this.memorialDayForm.dateBirth.split('-')[1]), Number(this.memorialDayForm.dateBirth.split('-')[2]));
            let dt = calendar.lunar2solar(Number(this.memorialDayForm.dateBirth.split('-')[0]), Number(this.memorialDayForm.dateBirth.split('-')[1]), Number(this.memorialDayForm.dateBirth.split('-')[2]), !!this.memorialDayForm.isLeap ? true : false);
            console.log(dt);
            return dayjs(`${dt.cYear}-${dt.cMonth}-${dt.cDay}`).format('YYYY年MM月DD日');
          } else {
            return dayjs(this.memorialDayForm.dateBirth).format('YYYY年MM月DD日');
          }
        } else {
          return '';
        }
      },
      // 阴历日期
      lunarCalendarDate() {
        if (!!this.form.dateBirth) {
          if (this.date.type == 'lunar') {
            let dt = calendar.lunar2solar(Number(this.form.dateBirth.split('-')[0]), Number(this.form.dateBirth.split('-')[1]), Number(this.form.dateBirth.split('-')[2]), !!this.date.isLeap ? true : false);
            return `${dt.gzYear}年 ${calendar.toChinaYear(dt.lYear)}${dt.IMonthCn}${dt.IDayCn}`;
          } else {
            let dt = calendar.solar2lunar(Number(this.form.dateBirth.split('-')[0]), Number(this.form.dateBirth.split('-')[1]), Number(this.form.dateBirth.split('-')[2]));
            return `${dt.gzYear}年 ${calendar.toChinaYear(dt.lYear)}${dt.IMonthCn}${dt.IDayCn}`;
          }
        } else {
          return '';
        }
      },
      memorialLunarCalendarDate() {
        if (!!this.memorialDayForm.dateBirth) {
          if (this.date.type == 'lunar') {
            let dt = calendar.lunar2solar(Number(this.memorialDayForm.dateBirth.split('-')[0]), Number(this.memorialDayForm.dateBirth.split('-')[1]), Number(this.memorialDayForm.dateBirth.split('-')[2]), !!this.memorialDate.isLeap ? true : false);
            return `${dt.gzYear}年 ${calendar.toChinaYear(dt.lYear)}${dt.IMonthCn}${dt.IDayCn}`;
          } else {
            let dt = calendar.solar2lunar(Number(this.memorialDayForm.dateBirth.split('-')[0]), Number(this.memorialDayForm.dateBirth.split('-')[1]), Number(this.memorialDayForm.dateBirth.split('-')[2]));
            return `${dt.gzYear}年 ${calendar.toChinaYear(dt.lYear)}${dt.IMonthCn}${dt.IDayCn}`;
          }
        } else {
          return '';
        }
      },
    },
    methods: {
      dayjs,
      // 获取家谱信息
      async getGenealogyInfo() {
        const { data } = await sheep.$api.genealogy.getTreeLists({
          genealogy_id: this.id,
        });
        // 家谱信息
        this.genealogyInfo = data;
        // 家谱列表
        this.genealogicalList.push(data.data.data);
      },
      // 获取世系排名
      async getRank() {
        const result = await sheep.$api.genealogy.getGenealogyTreeAvatarV2({
          genealogy_id: this.id,
        });
        this.genealogicalHead = result.data;
      },
      // 获取字辈
      async getGeneration() {
        const res = await sheep.$api.genealogy.getGenealogyShi({
          genealogy_id: this.id,
        });
        this.generationList = res.data;
      },
      setTran() {
        return !!this.genealogicalList && this.genealogicalList.length > 0 && !!this.genealogicalList[0].id ? 'transform: scale(1)' : 'transform: scale(1)';
      },
      transmitCoordinate(e) {
        // locationInformation.theFirstGeneration = e.top;
        this.$nextTick(() => {
          this.listHeight = e.height;
          this.$forceUpdate();
        });

      },
      // 更新视图宽度
      changeWidth(flag = false) {
        console.log('更新视图宽度');
        const query = uni.createSelectorQuery().in(this);
        this.movableViewInfo.width = 0
        this.movableViewInfo.height = 0
        setTimeout(()=>{
          query.select('#recursiveList').boundingClientRect(res => {
            console.log(res);
            if (res) {
              this.movableViewInfo.width = res.width / this.scaleValueAfter;
              this.movableViewInfo.height = res.height / this.scaleValueAfter;
              console.log('视图的宽度更新=>', this.movableViewInfo.width);
              uni.$emit('acquire');
            }
          }).exec();
        },10)
        // if (flag) {
        //   uni.$off('changeWidth');
        // }
      },
      // 选择类目
      async select(index) {
        this.selectIndex = index;
        if (this.isFirst && this.selectIndex == 0) {
          uni.$on('setMemberList', async (index) => {
            this.membership.push(index);
            console.log(this.membership.length);
            if (this.membership.length == this.genealogyInfo.all_count) {
              await uni.$emit('loadSuccess');
            }
          });
          setTimeout(() => {
            if (!this.genealogyInfo.is_simple) {
              uni.$emit('setAvatar_genealogy');
              uni.$emit('setFirstAvatar');
            }
          }, 10);
        }
      },
      // 获取册谱内容
      async getCanonizationDetail() {
        this.canonizationList = [];
        const { data } = await sheep.$api.book_list.index({
          genealogy_id: this.id,
          get_content: 1,
        });
        this.canonizationList.push({
          desc: 0,
          hall_num: data.hall_num,
          editor: data.editor,
          title: data.title,
          createtime: data.full_year.gregorian_year,
          branch: data.branch,
          cover_image_url: data.cover_image_url,
        });
        this.canonizationBg = data.background_image_url;
        data.pages.forEach(item => {
          this.canonizationList.push(item);
        });
        this.$nextTick(() => {
          this.$refs.canonizationComponents.refresh();
        });
      },
      // 获取纪念堂内容
      async getMemorialHallDetail() {
        const { data } = await sheep.$api.genealogy.getMemorialTablet({
          genealogy_id: this.id,
        });
        this.$nextTick(() => {
          this.memorialHallList = data;
          this.$forceUpdate();
        });
      },
      // 获取家谱生日
      async getGenealogyBirthdayList() {
        const { data } = await sheep.$api.genealogy.getGenealogyBirthdayList({
          page: 0,
          pagesize: 0,
          genealogy_id: this.id,
        });
        this.birthdayList = [...data.month, ...data.after_month];
      },
      // 获取家谱纪念日
      async getMemorialDay() {
        const { data } = await sheep.$api.genealogy.getGenealogyBirthdayListBy1({
          genealogy_id: this.id,
          page: 0,
          pagesize: 0,
        });
        this.anniversaryList = [...data.month, ...data.after_month];
      },
      // 开启生日详情
      async familyBirthday(info) {
        if (!info.date) {
          await this.editBirthday(info);
          return;
        }
        let { data } = await sheep.$api.genealogy.getFamilyMemoryDayDetail({
          id: info.id,
        });
        this.birthdayDetail = data;
        let memberInfo = await sheep.$api.family.getFamilyMemberDetail({ member_id: this.birthdayDetail.member_id });
        this.memberInfo = memberInfo.data;
        this.$refs.birthdayDetails.openPopup({
          showTitle: false,
          maskClick: true,
          showWidth: false,
          showConfirmButton: false,
        });
      },
      // 编辑生日弹窗
      async editBirthday(info) {
        console.log(info);
        this.$refs.birthdayDetails.closePopup();
        this.form.id = info.relation_id;
        this.form.selectId = info.member_id;
        this.form.dateBirth = info.date;
        this.form.selectName = info.member_username;
        this.date.solarDate = info.date;
        this.date.type = info.time_type != 1 ? 'solar' : 'lunar';
        this.date.timestamp = dayjs(info.date).valueOf();
        this.date.defaultValue = info.date != '' ? [info.date.split('-')[0] - 1900, info.date.split('-')[1] - 1, info.date.split('-')[2] - 1] : [100, 0, 0];
        this.date.isLeap = info.is_leap_month == 2 ? true : false;
        this.$refs.editBirthday.openPopup({
          title: '编辑生日',
          maskClick: true,
          showWidth: false,
          allWidth: '25vw',
          confirm: async () => {
            if (this.form.selectId == '') {
              sheep.$helper.toast('请选择家庭成员');
              return;
            }
            if (this.form.dateBirth == '') {
              sheep.$helper.toast('请选择日期');
              return;
            }
            const { code, msg } = await sheep.$api.genealogy.updateMemberInfo({
              id: this.form.id,
              member_id: this.form.selectId,
              isLeapMonth: !this.date.isLeap ? 1 : 2,
              birthday: this.date.type == 'solar' ? this.date.solarDate : this.date.lunarDateNumber,
              birthday_type: this.date.type == 'solar' ? 2 : 1,
            });
            if (code == 1) {
              sheep.$helper.toast('设置成功');
              this.birthdayList = [];
              await this.getGenealogyBirthdayList();
              this.$refs.editBirthday.closePopup();
            } else {
              sheep.$helper.toast(msg);
            }
          },
        });
      },
      // 关闭生日详情
      birthdayDetailsClose() {
        this.$refs.birthdayDetails.closePopup();
      },
      // 关闭生日编辑弹窗
      editBirthdayClose() {
        this.$refs.editBirthday.closePopup();
      },
      // 编辑生日弹窗选择日期
      openBetterCalendar() {
        if (!!this.form.dateBirth) {
          if (this.date.type == 'lunar') {
            let day = calendar.leapMonth(Number(this.date.defaultValue[0]) + 1900);
            if (!!this.date.isLeap) {
              let arr = [this.date.defaultValue[0], this.date.defaultValue[1] + 1, this.date.defaultValue[2]];
              this.$refs.betterCalendarRef.setPicker(arr, this.date.type, this.date.isLeap);
            } else {
              if (day <= 0) {
                this.$refs.betterCalendarRef.setPicker(this.date.defaultValue, this.date.type, this.date.isLeap);
              } else {
                if (this.form.dateBirth.split('-')[1] > day) {
                  let arr = [this.date.defaultValue[0], this.date.defaultValue[1] + 1, this.date.defaultValue[2]];
                  this.$refs.betterCalendarRef.setPicker(arr, this.date.type, this.date.isLeap);
                } else {
                  if (this.date.isLeap) {
                    let arr = [this.date.defaultValue[0], this.date.defaultValue[1] + 1, this.date.defaultValue[2]];
                    this.$refs.betterCalendarRef.setPicker(arr, this.date.type, this.date.isLeap);
                  } else {
                    this.$refs.betterCalendarRef.setPicker(this.date.defaultValue, this.date.type, this.date.isLeap);
                  }
                }

              }
            }
          } else {
            let arr = [];
            arr[0] = Number(this.form.dateBirth.split('-')[0] - 1900);
            arr[1] = Number(this.form.dateBirth.split('-')[1]) - 1;
            arr[2] = Number(this.form.dateBirth.split('-')[2]) - 1;
            this.$refs.betterCalendarRef.setPicker(arr, this.date.type, false);
          }
        }
        this.showCalendar = true;
      },
      // 选择日期
      selectDate(e) {
        console.log(e);
        this.date.type = e.type;
        this.date.timestamp = dayjs(e.solarDate).valueOf();
        this.date.solarDate = e.solarDate;
        this.date.lunarDate = e.lunarDate;
        this.date.lunarDateNumber = e.lunarDateNumber;
        this.date.isLeap = e.isLeap; // 一年里是否有闰月
        this.form.dateBirth = e.type == 'lunar' ? e.lunarDateNumber : e.solarDate;
        // this.date.type = e.type == 'lunar' ? 1 : 2
        this.showCalendar = false;
        this.date.defaultValue = e.selectValue;
      },
      // 关闭纪念日详情弹窗
      memorialClose() {
        this.$refs.memorialDetails.closePopup();
      },
      // 关闭纪念日弹窗
      editMemorialDayClose() {
        this.$refs.editMemorialDay.closePopup();
      },
      // 选择纪念日
      async anniversaryDetails(info, index) {
        console.log(info);
        if (!info.date) {
          await this.editMemorialDay(info);
          return;
        }
        const { data } = await sheep.$api.genealogy.getFamilyMemoryDayDetail({
          id: info.id,
        });
        this.memorialDateDetail = data;
        let memberInfo = await sheep.$api.family.getFamilyMemberDetail({ member_id: this.birthdayDetail.member_id });
        this.memorialMemberInfo = memberInfo.data;

        this.$refs.memorialDetails.openPopup({
          showTitle: false,
          maskClick: true,
          showWidth: false,
          showConfirmButton: false,
        });
      },
      // 开启编辑纪念日弹窗
      async editMemorialDay(options) {
        this.$refs.memorialDetails.closePopup();
        console.log(options);
        this.memorialDayForm.title = options.name;
        this.memorialDayForm.selectId = options.member_id;
        this.memorialDayForm.dateBirth = options.date;
        this.memorialDayForm.selectName = options.username;
        this.memorialDayForm.relation_id = options.relation_id;
        this.memorialDate.solarDate = options.date;
        this.memorialDate.member_id = options.member_id;
        this.memorialDate.type = options.time_type != 1 ? 'solar' : 'lunar';
        this.memorialDate.timestamp = dayjs(options.date).valueOf();
        this.memorialDate.defaultValue = options.date != '' && options.date != null ? [options.date.split('-')[0] - 1900, options.date.split('-')[1] - 1, options.date.split('-')[2] - 1] : [100, 0, 0];
        this.memorialDate.isLeap = options.isLeapMonth == 2 ? true : false;
        this.$refs.editMemorialDay.openPopup({
          title: '编辑纪念日',
          maskClick: true,
          showWidth: false,
          allWidth: '30vw',
          confirm: async () => {
            const { code } = await sheep.$api.genealogy.updateMemberInfo({
              id: this.memorialDayForm.relation_id,
              dieday_name: this.memorialDayForm.title,
              members: this.memorialDayForm.selectId,
              member_id: this.memorialDate.member_id,
              isLeapMonths_die: !this.memorialDate.isLeap ? 1 : 2,
              dieday: this.memorialDate.type == 'solar' ? this.memorialDate.solarDate : this.memorialDate.lunarDateNumber,
              is_lunar_die: this.memorialDate.type == 'solar' ? 2 : 1,
              type: 2,
            });
            if (code == 1) {
              await this.getMemorialDay();
              sheep.$helper.toast('设置成功');
              this.$refs.editMemorialDay.closePopup();
            }
          },
        });
      },
      // 编辑纪念日弹窗选择日期
      async openBetterCalendarMemorial() {
        if (!!this.memorialDayForm.dateBirth) {
          if (this.memorialDate.type == 'lunar') {
            let day = calendar.leapMonth(Number(this.memorialDate.defaultValue[0]) + 1900);
            if (!!this.memorialDate.isLeap) {
              let arr = [this.memorialDate.defaultValue[0], this.memorialDate.defaultValue[1] + 1, this.memorialDate.defaultValue[2]];
              this.$refs.memorialDay.setPicker(arr, this.memorialDate.type, this.memorialDate.isLeap);
            } else {
              if (day <= 0) {
                this.$refs.memorialDay.setPicker(this.memorialDate.defaultValue, this.memorialDate.type, this.memorialDate.isLeap);
              } else {
                if (this.memorialDayForm.dateBirth.split('-')[1] > day) {
                  let arr = [this.memorialDate.defaultValue[0], this.memorialDate.defaultValue[1] + 1, this.memorialDate.defaultValue[2]];
                  this.$refs.memorialDay.setPicker(arr, this.memorialDate.type, this.memorialDate.isLeap);
                } else {
                  if (this.memorialDate.isLeap) {
                    let arr = [this.memorialDate.defaultValue[0], this.memorialDate.defaultValue[1] + 1, this.memorialDate.defaultValue[2]];
                    this.$refs.memorialDay.setPicker(arr, this.memorialDate.type, this.memorialDate.isLeap);
                  } else {
                    this.$refs.memorialDay.setPicker(this.memorialDate.defaultValue, this.memorialDate.type, this.memorialDate.isLeap);
                  }
                }

              }
            }
          } else {
            let arr = [];
            arr[0] = Number(this.memorialDayForm.dateBirth.split('-')[0] - 1900);
            arr[1] = Number(this.memorialDayForm.dateBirth.split('-')[1]) - 1;
            arr[2] = Number(this.memorialDayForm.dateBirth.split('-')[2]) - 1;
            this.$refs.memorialDay.setPicker(arr, this.memorialDate.type, false);
          }
        }
        this.memorialShowCalendar = true;
      },
      // 选择纪念日日期
      selectMemorialDate(e) {
        this.memorialDate.type = e.type;
        this.memorialDate.timestamp = dayjs(e.solarDate).valueOf();
        this.memorialDate.solarDate = e.solarDate;
        this.memorialDate.lunarDate = e.lunarDate;
        this.memorialDate.lunarDateNumber = e.lunarDateNumber;
        this.memorialDate.isLeap = e.isLeap; // 一年里是否有闰月
        this.memorialDayForm.dateBirth = e.type == 'lunar' ? e.lunarDateNumber : e.solarDate;
        // this.date.type = e.type == 'lunar' ? 1 : 2
        this.memorialShowCalendar = false;
      },
      // 纪念堂跳转
      async memorialSkip(info) {
        if (!info) {
          sheep.$router.go('/pages/genealogy/famousQuote');
          return;
        }
        let { data } = await sheep.$api.genealogy.aliveDetail({
          type: 2,
          alive_id: info.id,
        });
        uni.setStorageSync('aliveDetail', JSON.stringify(data));
        sheep.$router.go('/pages/genealogy/ct_detail', {
          sex: info.sex,
          genealogy_id: this.id,
        });
      },
      // 放大
      async blowUp(info) {
        await uni.showLoading({
          title: '加载中...',
          mask: true,
        });
        await sheep.$store('family').setGenealogyTree(info.id);
        await uni.hideLoading();
        await sheep.$router.go('/pages/genealogy/management', {
          id: info.id,
          name: info.title,
          add_time: info.add_time,
          username: info.initiator,
        });
      },
    },
  };
</script>

<template>
  <view class="flex-sub flex align-center flex-column">
    <view style="width: 100%;"
          class="flex align-center justify-between "
    >
      <view style="width: 100%;padding: 10px 0;border-bottom: 1px solid #E8E8E8"
            class="flex align-center justify-between">
        <view class="flex align-end" style="margin-left: 20px;">
          <view class="flex align-end">
            <view style="font-size: 28px;color: #363636;margin-left: 5px;white-space: nowrap" class="fw_500">
              {{ genealogyInfo.name }}
            </view>
          </view>
          <view class="flex align-center">
            <view style="font-size: 20px;color: #363636;margin-left: 15px;white-space: nowrap" class="fw_500">
              家谱号: {{ genealogyInfo.code }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <uni-row style="width: 100%;flex-wrap: wrap" class="flex">
      <uni-col :xs="24" :sm="24" :lg="12" :xl="12" class="flex align-center" style="padding: 10px 0">
        <view v-for="(item,index) in genealogyOptions"
              :key="index"
              style="width: 146px;height: 50px;background: #FFFFFF;border-radius: 8px ;border: 1px solid #DBDBDB;margin-left: 10px;cursor:pointer;"
              class="flex align-center justify-center"
              :style="{
                border: index == selectIndex ? '1px solid #4887FF' : '1px solid #DBDBDB',
                background: index == selectIndex ? '#4887FF' : '#FFFFFF',
              }"
              @click.stop="select(index)"
        >
          <view style="font-weight: 500;font-size: 24px;color: #6F6F6F;"
                :style="{
                  color: index == selectIndex ? '#FFFFFF' : '#6F6F6F',
                }"
          >
            {{ item.name }}
          </view>
        </view>
      </uni-col>
      <uni-col :xs="24" :sm="24" :lg="12" :xl="12" class="flex align-center justify-end">
        <view class="flex align-center" style="margin-right: 10px;">
          <view
            style="width: 148px;height: 30px;border-radius: 15px;overflow: hidden;border: 1px solid #BCBCBC;margin-right: 20px;"
            class="flex align-center"
          >
            <input type="text" v-model="value" placeholder="搜索" style="margin-left: 10px;">
            <text class="iconfont icon-ic_search" style="margin-right: 15rpx;cursor:pointer;"></text>
          </view>
          <view style="color: #6F6F6F;font-size: 20px;font-weight: 500;margin-left: 10px;cursor:pointer;">
            统计
          </view>
          <view style="color: #6F6F6F;font-size: 20px;font-weight: 500;margin-left: 10px;cursor:pointer;">
            日志
          </view>
          <view style="color: #6F6F6F;font-size: 20px;font-weight: 500;margin-left: 10px;cursor:pointer;">
            设置
          </view>
        </view>
      </uni-col>
    </uni-row>
    <!-- 家谱列表 -->
    <view class="flex-sub flex align-center justify-center" style="width: 100%;height: 100px;position: relative"
          v-if="selectIndex == 0"
    >
<!--      <text class="iconfont icon-ic_enlarge"-->
<!--            style="font-size: 20px;cursor:pointer;"-->
<!--            @click.stop="blowUp(info)"-->
<!--      ></text>-->
      <view style="width: 99%;height: 98%;background: #FFF8E8;overflow: hidden">
        <movable-area style="width: 100%;height: 100%;"
                      @touchmove.stop
        >
          <movable-view style=""
                        :scale="true"
                        :scale-min="0.5"
                        :scale-max="1"
                        :friction="1"
                        :damping="200"
          >
            <movable-area id="movableArea" style="width: 100%;height: 100%;"
            >
              <movable-view id="movableView"
                            :style="{
                            width: movableViewInfo.width > 0 ? `${movableViewInfo.width}px` : `100%`,
                            height: movableViewInfo.height > 0 ? `${movableViewInfo.height}px` : `100%`
                          }"
                            class="flex align-center justify-center"
                            direction="all"
                            :out-of-bounds="false"
                            :animation="false"
                            :damping="50"
                            :x="movable.x"
                            :y="movable.y"
                            :friction="4"
                            inertia
              >
                <view id="recursiveList">
                  <recursive-list id="recursiveList"
                                  :style="setTran()"
                                  :children="genealogicalList"
                                  isTopLevel
                                  :is_create="genealogyInfo.is_create"
                                  :is_init="genealogyInfo.is_init"
                                  :generation="0"
                                  :is_simple="genealogyInfo.is_simple"
                                  :show_die_gray="genealogyInfo.show_die_gray"
                                  :genealogicalHead="genealogicalHead"
                                  :center-id="genealogyInfo.center_id"
                                  :end-id="genealogyInfo.end_id"
                                  :zibei_List="generationList"
                                  :list-height="listHeight"
                                  :is_first="isFirst"
                                  :showBackground="false"
                                  @transmitCoordinate="transmitCoordinate"
                  />
                </view>
              </movable-view>
            </movable-area>
          </movable-view>
        </movable-area>
      </view>
    </view>
    <!-- 册谱列表 -->
    <view class="flex-sub flex align-center justify-center" style="width: 100%"
          v-if="selectIndex == 1"
    >
      <view style="width: 99%;height: 98%;background: #FFF8E8;overflow: hidden"
            class="flex align-center justify-center"
      >
        <view style="height: 100%">
          <CanonizationComponents ref="canonizationComponents"
                                  :list="canonizationList"
                                  :backgroouond="canonizationBg"
                                  :genealogy_id="id"
          ></CanonizationComponents>
        </view>
      </view>
    </view>
    <!-- 纪念堂 -->
    <view class="flex-sub flex" style="width: 100%;overflow: hidden;position: relative"
          v-if="selectIndex == 2"
    >
      <view style="width: 99%;height:100%;background: #FFF8E8;overflow-y: scroll;position: absolute">
        <uni-row style="width: 100%;flex-wrap: wrap" class="flex">
          <uni-col :xs="12" :sm="8" :lg="4" :xl="3"
                   v-for="(item,index) in memorialHallList"
                   :key="index"
                   style="margin-top: 10px;"
                   class="flex align-center justify-center"
                   @click.stop="memorialSkip(item)"
          >
            <view style="width: 98%;background: #FAD582;border-radius: 8px 8px 8px 8px;cursor:pointer;height: 100%;"
                  class="flex flex-column align-center"
            >
              <view style="width: 80%;height: 188px;overflow: hidden;border-radius: 8px 8px 8px 8px;margin-top: 10px;"
                    class="flex align-center justify-center"
              >
                <image :src="item.image.indexOf('http') != -1 ? item.image : `${nc_image}${item.image}`"
                       style="width: 100%;height: 188px;"
                       mode="widthFix"
                ></image>
              </view>
              <view style="font-size: 16px;font-weight: 500;color: #865D01;margin-top: 15px;"
                    :style="{
                      color: item.dieday_gregorian_date && item.birthday_gregorian_date ? '#865D01' : 'transparent'
                    }"
              >
                {{ item.birthday_gregorian_date || '未填写' }}
              </view>
              <view style="font-size: 16px;font-weight: 500;color: #865D01;margin-top: 5px;"
                    :style="{
                      color: item.dieday_gregorian_date && item.birthday_gregorian_date ? '#865D01' : 'transparent'
                    }"
              >
                至
              </view>
              <view style="font-size: 16px;font-weight: 500;color: #865D01;margin-top: 5px;"
                    :style="{
                      color: item.dieday_gregorian_date && item.birthday_gregorian_date ? '#865D01' : 'transparent'
                    }"
              >
                {{ item.dieday_gregorian_date || '未填写' }}
              </view>
              <view style="font-size: 23px;font-weight: 500;color: #363636;margin-top: 10px;">
                {{ item.username }}
              </view>
              <view
                style="width: 80%;font-size: 16px;color: #865D01;font-weight: 500;background: #FFFFFF;border-radius: 18px;padding: 10px 0;margin-top: 10px;margin-bottom: 10px;"
                class="flex align-center justify-center">
                缅怀亲人
              </view>
            </view>
          </uni-col>
        </uni-row>
      </view>
    </view>
    <!-- 生日 -->
    <view class="flex-sub" style="width: 100%;position: relative"
          v-if="selectIndex == 3"
    >
      <uni-row
        style="width: 100%;max-height: 100%;margin-top: 10px;flex-wrap: wrap;overflow-y: scroll;position: absolute"
        class="flex"
      >
        <uni-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8"
                 v-for="(item,index) in birthdayList" :key="index"
                 class="flex align-center justify-center"
                 style="margin-bottom: 10px;"
                 @click.stop="familyBirthday(item)"
        >
          <view style="width: 98%;background: #F6F7FB;border-radius: 8px;cursor:pointer;padding: 10px 0"
                class="flex"
          >
            <view style="width: 25%;border-radius: 4px;"
                  class="flex align-center justify-center"
            >
              <image
                :src="item.member_avatar.indexOf('http') != -1 ? item.member_avatar : `${nc_image}${item.member_avatar}`"
                style="width: 100%;border-radius: 4px;margin-left: 10px;"
                mode="widthFix"
                v-if="!!item.member_avatar"
              ></image>
            </view>
            <view class="flex flex-column flex-sub" style="margin-left: 10px;margin-right: 10px;"
                  v-if="!!item.birthday">
              <view class="flex align-end">
                <view style="font-size: 24px;font-weight: 500;color: #363636;">{{ item.member_username }}</view>
                <view style="font-size: 14px;font-weight: 400;color: #0F0F0F;margin-left: 5px;">
                  {{ jsGetAge(item.date_type == 2 ? item.date : item.gregorian_date) }}周岁
                </view>
                <view style="font-size: 14px;font-weight: 400;color: #0F0F0F;margin-left: 5px;">
                  {{ item.member_sex == 1 ? '男' : '女' }}
                </view>
                <view style="font-size: 14px;font-weight: 400;color: #0F0F0F;margin-left: 5px;">
                  星座: {{ calendar.toAstro(dayjs(item.gregorian_date).month(), dayjs(item.gregorian_date).day()) }}
                </view>
              </view>
              <view style="font-size: 18px;font-weight: 400;color: #0F0F0F;margin-top: 10px;">
                <view>出生日期:
                  <text :style="{color:item.date_type == 2 ? '#FF4206':'#0F0F0F'}">
                    {{ dayjs(item.birthday).format('YYYY年MM月DD日') }}
                  </text>
                  <text :style="{color:item.date_type == 2 ? '#0F0F0F':'#FF4206'}" style="margin-left: 10px;">
                    {{ item.date }}
                  </text>
                </view>
                <view style="margin-top: 10px;">下次生日:
                  <text :style="{color:item.date_type == 2 ? '#FF4206':'#0F0F0F'}">
                    {{ dayjs(item.countdown.date).format('YYYY年MM月DD日') }}
                  </text>
                  <text :style="{color:item.date_type == 2 ? '#0F0F0F':'#FF4206'}" style="margin-left: 10px;">
                    {{ item.countdown.mDay }}
                  </text>
                </view>
              </view>
              <view style="font-size: 14px;font-weight: 400;color: #0F0F0F;margin-top: 10px;"
                    class="flex align-end justify-end"
                    v-if="item.countdown.day != 0"
              >
                距离
                <text style="color: #FF4206;">{{ jsGetAge(item.date_type == 2 ? item.date : item.birthday) + 1
                  }}
                </text>
                周岁还有
                <text style="color: #FF4206;font-size: 24px;">{{ item.countdown.day }}</text>
                天
              </view>
              <view v-else class="flex align-center justify-end">
                <text style="color: #FF4206;font-size: 24px;">今天</text>
              </view>
            </view>
            <view class="flex flex-column flex-sub" style="margin-left: 10px;margin-right: 10px;" v-else>
              <view class="flex align-end">
                <view style="font-size: 24px;font-weight: 500;color: #363636;">{{ item.member_username }}</view>
                <view style="font-size: 14px;font-weight: 400;color: #0F0F0F;margin-left: 5px;">
                  {{ item.member_sex == 1 ? '男' : '女' }}
                </view>
              </view>
              <view style="width: 100%;margin-top: 20px;" class="flex  align-center justify-center">
                <view class="jiluyixia flex flex-column align-center justify-between"
                      style="background: #ff4206;border-radius: 8px;width: 50%; "
                >
                  <view class="left flex align-center">
                    <image :src="`${IMG_URL}/index/jiating_jiluyixia_icon.png`"
                           style="width: 15px;height: 15px;"></image>
                    <view class="wenzi color_FFFFFF" style="font-size: 24px;font-weight: 500;color: #363636;">
                      记录一下
                    </view>
                  </view>
                  <view class="right color_FFFFFF" style="font-size: 24px;font-weight: 500;color: #363636;">
                    唯有亲情最相思
                  </view>
                </view>
              </view>
            </view>
          </view>
        </uni-col>
      </uni-row>
    </view>
    <!-- 纪念日 -->
    <scroll-view v-if="selectIndex == 4"
                 scroll-y="true"
                 style="width: 100%;height: 100%;"
    >
      <uni-row style="width: 100%;flex-wrap: wrap" class="flex">
        <uni-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8"
                 v-for="(item,index) in anniversaryList" :key="index"
                 class="flex align-center justify-center"
                 style="margin-bottom: 5px;margin-top: 5px;"
                 @click.stop="anniversaryDetails(item,index)"
        >
          <view style="width: 98%;background: #F6F7FB;border-radius: 8px;cursor:pointer;padding: 10px 0"
                class="flex"
          >
            <view class="flex flex-column flex-sub" style="margin-left: 10px;margin-right: 10px;" v-if="!!item.date">
              <view class="flex align-end">
                <view style="font-size: 24px;font-weight: 500;color: #363636;">{{ item.name }}</view>
              </view>
              <view style="font-size: 18px;font-weight: 400;color: #0F0F0F;margin-top: 10px;">
                <view>日期:
                  <text :style="{color:item.date_type == 2 ? '#FF4206':'#0F0F0F'}">
                    {{ dayjs(item.birthday).format('YYYY年MM月DD日') }}
                  </text>
                  <text :style="{color:item.date_type == 2 ? '#0F0F0F':'#FF4206'}">{{ item.lunar_date }}</text>
                </view>
              </view>
              <view style="font-size: 18px;font-weight: 400;color: #0F0F0F;margin-top: 10px;"
                    class="flex align-center"
              >
                成员:
                <view v-for="member in item.member_names.split(',')"
                      style="margin-left: 10px;"
                >
                  {{ member }}
                </view>
              </view>
              <view style="font-size: 14px;font-weight: 400;color: #0F0F0F;margin-top: 10px;"
                    class="flex align-end justify-end"
                    v-if="item.countdown.day != 0"
              >
                距离
                <text style="color: #FF4206;">{{ jsGetAge(item.type == 2 ? item.date : item.birthday) + 1
                  }}
                </text>
                周年还有
                <text style="color: #FF4206;font-size: 24px;">{{ item.countdown.day }}</text>
                天
              </view>
              <view v-else class="flex align-center justify-end">
                <text style="color: #FF4206;font-size: 24px;">今天</text>
              </view>
            </view>
            <view class="flex flex-column flex-sub" style="margin-left: 10px;margin-right: 10px;" v-else>
              <view class="flex align-end">
                <view style="font-size: 24px;font-weight: 500;color: #363636;">{{ item.name }}</view>
              </view>
              <view style="width: 100%;margin-top: 20px;" class="flex  align-center justify-center">
                <view class="jiluyixia flex flex-column align-center justify-between"
                      style="background: #ff4206;border-radius: 8px;width: 50%; "
                >
                  <view class="left flex align-center">
                    <image :src="`${IMG_URL}/index/jiating_jiluyixia_icon.png`"
                           style="width: 15px;height: 15px;"></image>
                    <view class="wenzi color_FFFFFF" style="font-size: 24px;font-weight: 500;color: #363636;">
                      记录一下
                    </view>
                  </view>
                  <view class="right color_FFFFFF" style="font-size: 24px;font-weight: 500;color: #363636;">
                    唯有亲情最相思
                  </view>
                </view>
              </view>
            </view>
          </view>
        </uni-col>
      </uni-row>
    </scroll-view>
    <!-- 生日详情 -->
    <s-first-popup ref="birthdayDetails" @closePopup="birthdayDetailsClose">
      <template #content>
        <view style="width: 30vw;height: 70vh;position: relative" class="familyBirthBg flex flex-column align-center">
          <view class="hW_221"></view>
          <view>
            <template v-if="!!memberInfo">
              <image-avater :width="84" :height="84" :src="`${memberInfo.avatar}`"></image-avater>
            </template>
            <template v-else>
              <view class="wh_84 hW_84">
                <image :src="`${birthdayDetail.avatar}`" class="wh_84 hW_84" style="border-radius: 50%"></image>
              </view>
            </template>
          </view>
          <view class="hW_15"></view>
          <view class="dayDetail_birthday_name">
            <text class="dayDetail_birthday_name_text" style="font-size: 40rpx;color: #323232;">
              {{ birthdayDetail.name }}
            </text>
          </view>
          <view class="hW_15"></view>
          <view class="dayDetail_birthday_timeDetails flex align-center justify-center">

            <text class="dayDetail_birthday_timeDetails_text" style="font-size: 24rpx;" :style="{
          color:birthdayDetail.date_type != 1 ? '#000000':'#E05E5B'
        }">
              {{ birthdayDetail?.detail?.gregorian_date }}
            </text>
            <text class="dayDetail_birthday_timeDetails_text ml_10" style="font-size: 24rpx;" :style="{
                      color:birthdayDetail.date_type != 1 ? '#E05E5B':'#000000'
                    }">
              {{ (birthdayDetail?.detail?.ganzhi_year + birthdayDetail?.detail?.lunar_date)
              }}
            </text>
            <text class="dayDetail_birthday_timeDetails_text  ml_10" style="font-size: 24rpx;color: #E05E5B;"
                  v-if="!!birthdayDetail.detail">
              {{ dayjs(birthdayDetail?.detail?.gregorian_year).format('dddd') }}
            </text>
          </view>
          <view class="hW_44"></view>
          <view style="font-size: 36rpx;color: #E05E5B;font-weight: 500;">
            生日快乐
          </view>
          <view class="hW_9"></view>
          <image :src="`${IMG_URL}/index/happyBirthday.png`" style="width: 371rpx;height: 122rpx;"></image>
          <view class="hW_11"></view>
          <view class="dayDetail_birthday_timeDetails_title">
            <text class="dayDetail_birthday_timeDetails_title_text" style="font-size: 27rpx;color: #E05E5B;">{{
                Number(birthdayDetail?.detail?.full_year.split('周岁')[0]) + 1 }}岁生日倒计时
            </text>
          </view>
          <view class="dayDetail_birthday_timeDetails_day">
            <template v-if="birthdayDetail.countdownDay > 0">
              <text class="dayDetail_birthday_timeDetails_day_text" style="color: #E05E5B;">
                {{ birthdayDetail.countdownDay
                }}
              </text>
              <text class="dayDetail_birthday_timeDetails_day_unit ml_10" style="color: #E05E5B;">天</text>
            </template>
            <template v-else-if="birthdayDetail.countdownDay == 0">
              <text class="dayDetail_birthday_timeDetails_day_text" style="color: #E05E5B;">今天</text>
            </template>
          </view>
          <view class="dayDetail_birthday_nextTimeDetails flex align-center justify-center">
            <text class="dayDetail_birthday_timeDetails_text" style="font-size: 24rpx;color: #000000;font-weight: 500;">
              {{ dayjs(birthdayDetail.countdown.date).format('YYYY年MM月DD日')
              }} {{
                birthdayDetail.countdown.mDay }} {{ dayjs(birthdayDetail.countdown.date).format('dddd') }}
            </text>
          </view>
          <view class="hW_103"></view>
          <view class="dayDetail_birthday_operation flex align-center justify-center" style="cursor:pointer;"
                @click.stop="editBirthday(birthdayDetail)"
          >
            <text class="dayDetail_birthday_operation_text">编辑生日</text>
          </view>
        </view>
      </template>
    </s-first-popup>
    <!-- 编辑生日 -->
    <s-first-popup ref="editBirthday" @closePopup="editBirthdayClose">
      <template #content>
        <view class="birthday_date flex align-center justify-center mt_25"
              style="width: 90%;"
              v-if="!!form.dateBirth"
              @click.stop="openBetterCalendar"
        >
          <text class="birthday_date_text"
                :style="{
                  color:date.type == 'lunar' ? '#9F9F9F' : '#000000'
                }"
          >
            {{ solarCalendarDate }}
          </text>
          <text class="birthday_date_text ml_10"
                :style="{
                  color:date.type == 'lunar' ? '#000000' : '#9F9F9F'
                }"
          >
            {{ lunarCalendarDate }}
          </text>
        </view>
        <view class="birthday_date flex align-center justify-center mt_25" style="width: 90%;" v-else>
          点击设置日期
        </view>
        <view class="birthday_date flex align-center justify-center mt_25" style="width: 90%;">
          <text class="birthday_date_text">{{ !!form.selectName ? form.selectName : '点击选择家庭成员' }}</text>
        </view>
        <view class="birthday_tips flex flex-column" style="width: 90%;">
          <text class="birthday_tips_text mt_9">提示：</text>
          <text class="birthday_tips_text mt_9">1.首页只能为家庭成员添加生日或纪念日</text>
          <text class="birthday_tips_text mt_9">2.非家庭成员如需要添加生日请在我的里面进行添加</text>
        </view>
      </template>
    </s-first-popup>

    <!-- 编辑生日弹窗时间 -->
    <s-better-calendar class="z-999"
                       ref="betterCalendarRef"
                       :maxYear="new Date().getFullYear()"
                       :default-type="date.type"
                       :default-value="date.defaultValue"
                       :showCalendar="showCalendar"
                       :isLeap="date.isLeap"
                       @confirm="selectDate"
                       @cancel="showCalendar = false"
    ></s-better-calendar>
    <!-- 纪念日详情 -->
    <s-first-popup ref="memorialDetails" @closePopup="memorialClose">
      <template #content>
        <view class="dayDetail_anniversary">
          <image class="dayDetail_anniversary_iconFirst" :src="`${IMG_URL}/index/anniversary_icon.png`"></image>
          <image class="dayDetail_anniversary_iconSecond" :src="`${IMG_URL}/index/anniversary_icon.png`"></image>
          <image class="dayDetail_anniversary_iconThird" :src="`${IMG_URL}/index/anniversary_icon.png`"></image>
          <image class="dayDetail_anniversary_iconFourth" :src="`${IMG_URL}/index/anniversary_icon.png`"></image>
          <view class="dayDetail_anniversary_avatar">
            <image-avater :src="`${nc_image}${birthdayDetail.avatar}`" :width="96" :height="96"
                          :mode="'widthFix'"></image-avater>
          </view>
          <view class="dayDetail_anniversary_name">
            <text class="dayDetail_anniversary_name_text">{{ birthdayDetail.name }}</text>
          </view>
          <template v-if="memorialDateDetail.countdownDay>0">
            <view class="dayDetail_anniversary_identity">
              <text class="dayDetail_anniversary_identity_text">还有</text>
            </view>
            <view class="dayDetail_anniversary_day">
              <text class="dayDetail_anniversary_day_text">{{ memorialDateDetail.countdownDay }}</text>
            </view>
            <view class="dayDetail_anniversary_unit">
              <text class="dayDetail_anniversary_unit_text">天</text>
            </view>
          </template>
          <template v-else>
            <view class="dayDetail_anniversary_day">
              <text class="dayDetail_anniversary_day_text">今天</text>
            </view>
          </template>
          <view class="dayDetail_anniversary_timeDetails flex align-center justify-center">
            <text class="dayDetail_anniversary_timeDetails_text" style="color: #000000">
              {{ dayjs(memorialDateDetail.countdown?.date).format('YYYY年MM月DD日')
              }} {{
                memorialDateDetail.countdown?.mDay }} {{ dayjs(memorialDateDetail.countdown?.date).format('dddd') }}
            </text>
          </view>
          <view class="dayDetail_anniversary_bottomButton flex align-center justify-center"
                @click.stop="editMemorialDay(memorialDateDetail)">
            <text class="dayDetail_anniversary_bottomButton_text">编辑纪念日</text>
          </view>
          <image :src="`${IMG_URL}/index/down_background.png`" class="dayDetail_anniversary_downBackground"></image>
          <!--      <image :src="`${IMG_URL}share.png`" class="dayDetail_anniversary_shareIcon"></image>-->
        </view>
      </template>
    </s-first-popup>
    <!-- 编辑纪念日 -->
    <s-first-popup ref="editMemorialDay" @closePopup="editMemorialDayClose">
      <template #content>
        <view class="birthday_date flex align-center justify-center mt_25">
          <input type="text" class="birthday_date_input" v-model="memorialDayForm.title"
                 placeholder="点击输入纪念日标题"
                 placeholder-class="birthday_date_placeholder" style="text-align: center">
        </view>
        <view class="birthday_date flex align-center justify-center mt_25" @click.stop="openBetterCalendarMemorial"
              v-if="!!memorialDayForm.dateBirth">
          <text class="birthday_date_text" :style="{
        color:memorialDate.type == 'lunar' ? '#9F9F9F' : '#000000'
      }">
            {{ memorialSolarCalendarDate }}
          </text>
          <text class="birthday_date_text ml_10" :style="{
        color:memorialDate.type == 'lunar' ? '#000000' : '#9F9F9F'
      }">
            {{ memorialLunarCalendarDate }}
          </text>
        </view>
        <view class="birthday_date flex align-center justify-center mt_25" @click.stop="openBetterCalendarMemorial"
              v-else>
          点击设置日期
        </view>
        <view class="birthday_date flex align-center justify-center mt_25">
          <text class="birthday_date_text">{{ !!memorialDayForm.selectName ? memorialDayForm.selectName : '点击选择家庭成员'
            }}
          </text>
        </view>
        <view class="birthday_tips flex flex-column">
          <text class="birthday_tips_text mt_9">提示：</text>
          <text class="birthday_tips_text mt_9">1.首页只能为家庭成员添加生日或纪念日</text>
          <text class="birthday_tips_text mt_9">2.非家庭成员如需要添加生日请在我的里面进行添加</text>
        </view>
      </template>
    </s-first-popup>
    <!-- 编辑纪念日弹窗时间 -->
    <s-better-calendar class="z-999"
                       ref="memorialDay"
                       :maxYear="new Date().getFullYear()"
                       :default-type="memorialDate.type"
                       :default-value="memorialDate.defaultValue"
                       :showCalendar="memorialShowCalendar"
                       :isLeap="memorialDate.isLeap"
                       @confirm="selectMemorialDate"
                       @cancel="memorialShowCalendar = false"
    ></s-better-calendar>
  </view>
</template>

<style scoped lang="scss">
  .familyCulture_bg {
    background: url($uni-bg-url-sq + "/index/pc_familyCulture_bg.png") no-repeat;
    background-size: 100% 100%;
  }

  .familyCulture_content {
    background: url($uni-bg-url-sq + "/index/pc_familyCulture_content.png") no-repeat;
    background-size: 100% 100%;
  }

  .familyMemberPopUp {
    width: 506rpx;


    .familyMemberPopUp_title {
      width: 454rpx;

      .familyMemberPopUp_title_name {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 48rpx;
        color: #292929;

      }

      .familyMemberPopUp_title_detail {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #9F9F9F;
      }
    }

    .familyMemberPopUp_icon {
      width: 147rpx;
      height: 147rpx;
      position: absolute;
      top: 0;
      right: 0;
    }

    .familyMemberPopUp_scrollView {
      width: 506rpx;
      overflow: hidden;
      white-space: nowrap;

      .familyMemberPopUp_scrollView_list {
        display: inline-block;
      }
    }

    .familyMemberPopUp_editInfo {
      width: 506rpx;

      .familyMemberPopUp_editInfo_left {
        width: 239rpx;
        height: 80rpx;
        background: #FFFFFF;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        border: 2rpx solid #707070;

        input {
          text-align: center;
        }
      }

      .familyMemberPopUp_editInfo_right {
        width: 239rpx;
        height: 80rpx;
        background: #FFFFFF;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        border: 2rpx solid #707070;

        input {
          text-align: center;
        }
      }

      .familyMemberPopUp_editInfo_placeholder {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #A0A0A0;
      }
    }
  }

  .familyCircleDetails_imageList {
    width: 702rpx;

    .familyCircleDetails_imageList_content {
      //width: 596rpx;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-column-gap: 10rpx;
      grid-row-gap: 10rpx;

      .familyCircleDetails_imageList_content_list {
        width: 192rpx;
        height: 192rpx;
        background: #F5F5F5;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        overflow: hidden;
        position: relative;

        .del {
          position: absolute;
          right: 0;
          top: 0;
        }

        .familyCircleDetails_imageList_content_list_imageList {
          max-width: 192rpx;
          max-height: 192rpx;
        }

        .familyCircleDetails_imageList_content_list_image {
          width: 66rpx;
          height: 66rpx;
        }

        .familyCircleDetails_imageList_content_list_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: #A0A0A0;
        }
      }
    }
  }

  .familyBirthBg {
    background: url($uni-bg-url-sq + "/index/birthdayBackground01.png") no-repeat;
    background-size: 100% 100%;
    border-radius: 43rpx 43rpx 43rpx 43rpx;
  }

  .dayDetail_anniversary_iconFirst {
    position: absolute;
    top: 21rpx;
    right: 44rpx;
    width: 375rpx;
    height: 306rpx;
  }

  .dayDetail_anniversary_iconSecond {
    position: absolute;
    top: 310rpx;
    left: 64rpx;
    width: 199rpx;
    height: 162rpx;
  }

  .dayDetail_anniversary_iconThird {
    position: absolute;
    top: 723rpx;
    right: 144rpx;
    width: 80rpx;
    height: 65rpx;
  }

  .dayDetail_anniversary_iconFourth {
    position: absolute;
    top: 632rpx;
    right: 24rpx;
    width: 155rpx;
    height: 127rpx;
  }

  .dayDetail_anniversary_identity {
    position: absolute;
    top: 750rpx;
    left: 50%;
    transform: translateX(-50%);

    &_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 20rpx;
      color: #FFFFFF;
    }
  }

  .dayDetail_anniversary_day {
    position: absolute;
    top: 766rpx;
    left: 50%;
    transform: translateX(-50%);

    .dayDetail_anniversary_day_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 98rpx;
      color: #FFFFFF;
    }
  }

  .dayDetail_anniversary_unit {
    position: absolute;
    top: 897rpx;
    left: 50%;
    transform: translateX(-50%);

    .dayDetail_anniversary_unit_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 20rpx;
      color: #FFFFFF;
    }
  }

  .dayDetail_anniversary_timeDetails {
    position: absolute;
    top: 945rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 497rpx;
    height: 51rpx;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 26rpx 26rpx 26rpx 26rpx;
    border: 2rpx solid #FFFFFF;

    &_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 24rpx;
      color: #FFFFFF;
    }
  }

  .dayDetail_anniversary_bottomButton {
    position: absolute;
    top: 1032rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 166rpx;
    height: 48rpx;
    background: #FFFFFF;
    border-radius: 36rpx 36rpx 36rpx 36rpx;

    &_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 25rpx;
      color: #FF4206;
    }
  }

  .dayDetail_anniversary_downBackground {
    position: absolute;
    bottom: 38rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 77rpx;
    height: 77rpx;
  }

  .dayDetail_anniversary_shareIcon {
    width: 50rpx;
    height: 50rpx;
    position: absolute;
    right: 44rpx;
    top: 47rpx;
  }

  .dayDetail_birthday_timeDetails_content {
    position: absolute;
    top: 565rpx;
    left: 50%;
    transform: translateX(-50%);
    padding: 21rpx 28rpx;
    width: 662rpx;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    border: 2rpx solid #FFFFFF;

    &_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 24rpx;
      color: #FFFFFF;
    }
  }

  .dayDetail_birthday_operation {
    width: 124rpx;
    height: 37rpx;
    background: #E05E5B;
    border-radius: 19rpx 19rpx 19rpx 19rpx;


    &_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 25rpx;
      color: #FFFFFF;
    }
  }

  .dayDetail_birthday_timeDetails {
    &_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 24rpx;
      color: #FFFFFF;
    }
  }

  .dayDetail_birthday_nextTimeDetails {
    width: 519rpx;
    height: 45rpx;
    border-radius: 21rpx 21rpx 21rpx 21rpx;
    border: 2rpx solid #EC6B68;

    &_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 24rpx;
      color: red;
    }
  }

  .dayDetail_birthday_timeDetails_day_unit {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 36rpx;
    color: #FFFFFF;
  }

  .dayDetail_birthday_timeDetails_day_text {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 127rpx;
    color: #FFFFFF;
  }

  .birthday_date {
    width: 702rpx;
    height: 80rpx;
    background: #EEEEEE;
    border-radius: 40rpx 40rpx 40rpx 40rpx;

    .birthday_date_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #9F9F9F;
    }
  }

  .birthday_tips {
    width: 702rpx;

    .birthday_tips_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #9F9F9F;
    }
  }

  .birthday_tips {
    width: 702rpx;

    .birthday_tips_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #9F9F9F;
    }
  }

  .birthday_bottomButton {
    width: 362rpx;
    height: 80rpx;
    background: #FF4206;
    border-radius: 41rpx 41rpx 41rpx 41rpx;

    .birthday_bottomButton_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
    }
  }


  .dayDetail_anniversary {
    width: 750rpx;
    height: 80vh;
    background: linear-gradient(180deg, #5C98E7 0%, #CEE0F9 100%);
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    position: relative;


    .dayDetail_anniversary_iconFirst {
      position: absolute;
      top: 21rpx;
      right: 44rpx;
      width: 375rpx;
      height: 306rpx;
    }

    .dayDetail_anniversary_iconSecond {
      position: absolute;
      top: 310rpx;
      left: 64rpx;
      width: 199rpx;
      height: 162rpx;
    }

    .dayDetail_anniversary_iconThird {
      position: absolute;
      top: 723rpx;
      right: 144rpx;
      width: 80rpx;
      height: 65rpx;
    }

    .dayDetail_anniversary_iconFourth {
      position: absolute;
      top: 632rpx;
      right: 24rpx;
      width: 155rpx;
      height: 127rpx;
    }

    .dayDetail_anniversary_avatar {
      position: absolute;
      top: 579rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 96rpx;
      height: 96rpx;
    }

    .dayDetail_anniversary_name {
      position: absolute;
      top: 681rpx;
      left: 50%;
      transform: translateX(-50%);

      &_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 36rpx;
        color: #FFFFFF;
      }
    }

    .dayDetail_anniversary_identity {
      position: absolute;
      top: 750rpx;
      left: 50%;
      transform: translateX(-50%);

      &_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 20rpx;
        color: #FFFFFF;
      }
    }

    .dayDetail_anniversary_day {
      position: absolute;
      top: 766rpx;
      left: 50%;
      transform: translateX(-50%);

      .dayDetail_anniversary_day_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 98rpx;
        color: #FFFFFF;
      }
    }

    .dayDetail_anniversary_unit {
      position: absolute;
      top: 897rpx;
      left: 50%;
      transform: translateX(-50%);

      .dayDetail_anniversary_unit_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 20rpx;
        color: #FFFFFF;
      }
    }

    .dayDetail_anniversary_timeDetails {
      position: absolute;
      top: 945rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 497rpx;
      height: 51rpx;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 26rpx 26rpx 26rpx 26rpx;
      border: 2rpx solid #FFFFFF;

      &_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #FFFFFF;
      }
    }

    .dayDetail_anniversary_bottomButton {
      position: absolute;
      top: 1032rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 166rpx;
      height: 48rpx;
      background: #FFFFFF;
      border-radius: 36rpx 36rpx 36rpx 36rpx;

      &_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 25rpx;
        color: #FF4206;
      }
    }

    .dayDetail_anniversary_downBackground {
      position: absolute;
      bottom: 38rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 77rpx;
      height: 77rpx;
    }

    .dayDetail_anniversary_shareIcon {
      width: 50rpx;
      height: 50rpx;
      position: absolute;
      right: 44rpx;
      top: 47rpx;
    }
  }
</style>